<template lang="html">
  <div class="header-tab" id="app_header">
      <div class="Swipe-tab Swipe-tab_2 f-cb">
          <a  @click="tabSwitch(1)" :class="{Swipetab__on:on}"></a>
          <a  @click="tabSwitch(2)" :class="{Swipetab__on:!on}"></a>
          <!-- <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter"> -->
          <i  ref="banner" class="banner"></i>
          <!-- </transition> -->
      </div>
      <em class="header-user" onclick="location.href='/search'"></em>
      <em class="header-checkin"></em>
  </div>
</template>

<script>
export default {
  data(){
    return {
      index_header_tab_width:'',
      header_position:'',
      on:true
    }
  },
  methods:{
    tabSwitch:function(path){
      switch (path) {
        case 1:
          if(this.on == true)return;
          this.on = true;
          this.$refs['banner'].style.left = "16.7%";
          this.$emit('changePage','1');
          break;
        default:
          if(this.on == false)return;
          this.on = false;
          this.$refs['banner'].style.left = "66.7%";
          this.$emit('changePage','2');
          break;
      }
      // this.$router.push(path);
    },
    // beforeEnter: function (el) {
    // },
    // enter: function (el, done) {
    //   done()
    // },
    // afterEnter: function (el) {
    // }
  },
}
</script>

<style lang="css" scoped>
  .header-tab{
      padding:0px 90px;
      text-align: center;
      line-height: 44px;
      background: #850f0f;
      border:1px solid #850f0f;
      position:relative;
  }

  .header-tab i {
      bottom: -1px;
  }

  .header-tab i::before{
      content:'';
      display: block;
      height:2px;
      width:34px;
      margin:0 auto;
      background: #777;
  }

  .header-user{
      position:absolute;
      right:0px;
      top:0px;
      width:44px;
      height:44px;
      background: url(http://image.read.duokan.com/mfsv2/download/fdsc3/p01dSYLeWtSR/tY73MgTfVw7UAS.png)  no-repeat center;
      background-size: 16px;
  }

  .header-checkin{
      position:absolute;
      left:0px;
      top:0px;
      width:44px;
      height:44px;
      background: url("../assets/static/img/book2.png") no-repeat center;
      background-size: 22px;
  }

  .Swipe-tab {
      position: relative;
      overflow: hidden;
      z-index:1;
  }

  .Swipe-tab>i{
      position: absolute;
      left:16.7%;
      transition:left .5s;
  }

  .Swipe-tab>a{
      float:left;
      color:#e7e3de;
  }

  .Swipe-tab_2>a{
      width:50%;
      text-align: center;
  }

  .f-cb::after{
      clear:both;
      content:'';
      overflow: hidden;
      visibility: hidden;
      height:0;
      display: block;
  }
  a.Swipetab__on{
      color: #ff6600;
  }
  .header-tab a:first-child:before {
    content: '\4e66\57ce';
  }
  .header-tab a:before {
      content: '\4e66\67b6';
      display: block;
      margin: 0 auto;
      width: 2em;
  }
  .Swipetab__on:before {
      color: #ff6600;
  }
</style>
